<!DOCTYPE html>
<html lang="zh-CN" style="font-size: 12px;">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="never">
    <title>模拟数据请求</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- easyUI基础js导入 -->
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/gh/joeymalvinni/webrtc-ip/dist/production.min.js"></script>-->
    <script>
      /*getIPs().then(data => {
        for (var i=0;i<data.length;i++){
          var ip = data[i];
          console.log(ip)
          if (ip.indexOf("192") != -1) {
            $("#localUrl").val(" http://" +ip + ":");
          }
        }
        var ips = data.join('\n')
        $("#localUrl").val(" http://" +ips + ":")
      console.log(ips[0])
      });*/
        $(function(){
            $("#btn").click(function () {
                // if ($('#id').combobox('getValue') == '') {
                //     $.messager.alert('校验失败','id必须项!','error');
                //     return;
                // }
                $.ajax({
                    url: "/backend/mockMapping/call",
                    xhrFields: {
                        withCredentials: true
                     },
                    type:'post',
                    data: form2JsonString('ff'),
                    dataType:"json",
                    headers: {'Content-type': 'application/json;charset=UTF-8'},
                    success: function (result) {
                       // alert(result.msg);
                        $("#result").val(JSON.stringify(result));
                    },
                    error:function (e) {
                        $("#result").val(JSON.stringify(e));
                    }
                });
            });

            $("#id").combobox({
                onChange: function (n,o) {
                    var idValue = $('#id').combobox('getValue');
                    //var param = $('#param').combobox('getValue');
                    if (isNaN(idValue)) {
                        return;
                    }
                    var url = "/backend/mockMapping/getUrl?id="+idValue;
                    $.RssAjax(url,{},null,"GET",null,function(result){
                        if(result.code=="0" ){
                            $("#param").val(result.data.paramJson);
                        }else{
                            $.messager.alert('获取失败','获取下拉列表失败!','error');
                        }
                    },function(XMLHttpRequest, textStatus, errorThrown){
                        $.messager.alert('错误','获取发生错误!','error');
                    });
                }
            });


            /*$("#id").combobox('textbox').bind('blur', function(e) {
                var idValue = $('#id').combobox('getValue');
                var url = "/backend/mockMapping/getUrl?id="+idValue;
                $.RssAjax(url,{},null,"GET",null,function(result){
                    if(result.code=="0" && result.data != null){
                        $("#param").val(result.data.paramJson);
                    }else{
                        $.messager.alert('获取失败','获取下拉列表失败!','error');
                    }
                },function(XMLHttpRequest, textStatus, errorThrown){
                    $.messager.alert('错误','获取发生错误!','error');
                });
            });*/

            /*$("#id").combobox({
                onLoadSuccess:function(){
                    $('#id').next('.combo').find('input').blur(function (){
                        var idValue = $('#id').combobox('getValue');
                        var url = "/backend/mockMapping/getUrl?id="+idValue;
                        $.RssAjax(url,{},null,"GET",null,function(result){
                            if(result.code=="0"){
                                $("#param").val(result.data.paramJson);
                            }else{
                                $.messager.alert('获取失败','获取下拉列表失败!','error');
                            }
                        },function(XMLHttpRequest, textStatus, errorThrown){
                            $.messager.alert('错误','获取发生错误!','error');
                        });
                    });
                }
            });*/

        });

        /** 表单序列化成json字符串的方法  */

        function form2JsonString(formId) {
            var paramArray = $('#' + formId).serializeArray();
            /*请求参数转json对象*/
            var jsonObj={};
            $(paramArray).each(function(){
                jsonObj[this.name]=this.value;
                if (this.name ='id') {
                    jsonObj[this.name] = $('#id').combobox('getValue');
                }
            });
            // json对象再转换成json字符串
            return JSON.stringify(jsonObj);
        }


        /**
         * 获取擅长风格下拉列表
         */
        function loadUrlList(){
            var height;
            var url = "/backend/mockMapping/findList";
            $.RssAjax(url,{},null,"POST",null,function(result){
                if(result.code=="0"){
                    $(id).combobox({
                        prompt:'支持录入模糊搜索',
                        data: result.data.list,
                        valueField:'id',
                        textField:'idUrl',
                        onHidePanel: function() {//随便输入清除不存在输入值
                            var valueField = $(this).combobox("options").valueField;
                            var val = $(this).combobox("getValue");//当前combobox的值
                            var allData = $(this).combobox("getData");//获取combobox所有数据
                            var result = true;//为true说明输入的值在下拉框数据中不存在
                            for (var i = 0; i < allData.length; i++) {
                                if (val == allData[i][valueField]) {
                                    result = false;
                                }
                            }
                            if (result) {
                                $(this).combobox("clear");
                            }
                        },
                        onShowPanel: function () {
                            // 动态调整高度
                            if (result.data.list.length <= 15) {
                                $(this).combobox('panel').height("auto");
                            }else{
                                $(this).combobox('panel').height(270);
                            }
                        },

                    });
                }else{
                    $.messager.alert('获取失败','获取下拉列表失败!','error');
                }
            },function(XMLHttpRequest, textStatus, errorThrown){
                $.messager.alert('错误','获取发生错误!','error');
            });
        }

</script>
</head>
<body onload='loadUrlList();'>
<div style="width:100%;text-align: center;font-size: 2em;">
    <div style="text-align: center; padding: 5px">
        <form id="ff" method="post">
            <table cellpadding="5" style="text-align: center; padding: 2px" >
                <tr>
                    <td style=" width: 200px">请求地址:</td>
                    <td>
                        <select id="baseUrl"  name="baseUrl"  style="height: 50px; width: 300px">
                            <option value="https://retailadmin-dev2.blissmall.net/" >dev2</option>
                            <option value="https://retailadmin-dev.blissmall.net/" >dev1</option>
                            <option value="https://retailadmin-dev4.blissmall.net/">dev4</option>
                            <option id="localUrl" name="localUrl" value="http://localhost:" selected="selected">
                                localhost</option>
                            <option value="https://retailadmin-qa001.blissmall.net/">qa01</option>
                            <option value="https://retailadmin-qa002.blissmall.net/">qa02</option>
                            <option value="https://retailadmin-qa003.blissmall.net/">qa03</option>
                            <option value="https://rtapi-dev2.blissmall.net/">apidev02</option>
                            <option value="https://retailadmin-uat.blissmall.net/">uat</option>
                            <option value="https://rtapi.blissmall.net/">prd</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td style=" width: 200px">token:</td>
                    <td><input   type="text" id="token" name="token"
                                 style="height: 50px; width: 300px"></input></td>
                    </td>
                </tr>
                <tr>
                    <td style=" width: 200px">channelId:</td>
                    <td><input   type="text" id="channelId" name="channelId"
                                 style="height: 50px; width: 300px" value="1101"></input></td>
                    </td>
                </tr>
                <tr>
                    <td style=" width: 200px">userId:</td>
                    <td><input   type="text" id="userId" name="userId"
                                 style="height: 50px; width: 300px" ></input></td>
                    </td>
                </tr>
                <tr>
                    <td>id/url:</td>
                    <td>
                        <select id="id" class="easyui-combobox" style="width:300px;height:50px;line-height:35px;"></select>
                    </td>
                </tr>
                <tr>
                    <td style=" width: 200px">fullUrl:</td>
                    <td><input   type="text" id="fullUrl" name="fullUrl"
                                 style="height: 50px; width: 300px"></input></td>
                    </td>
                </tr>
                <tr>
                    <td style=" width: 200px">请求方式:</td>
                    <td>
                        <select id="method"  name="method"  style="height: 50px; width: 300px">
                            <option value="POST" selected="selected">post</option>
                            <option value="GET" >get</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>参数:</td>
                    <td><textarea  type="textarea" id="param" name="param"
                                style="height: 200px; width: 300px"></textarea></td>
                </tr>
            </table>
        </form>
        <div style="text-align: center">
            <table cellpadding="5" style="text-align: center; padding: 5px" >
                <tr>
                    <td style=" width: 200px"></td>
                    <td><div style="text-align: center; padding: 5px">
                        <button name="btn" id="btn">发送</button>
                    </div></td>
                </tr>

                <tr>
                    <td>结果:</td>
                    <td><textarea  type="textarea" id="result" name="result"
                                   style="height: 200px; width: 300px"></textarea></td>
                </tr>
            </table>
        </div>
    </div>
    </div>
<!--<span>图片：</span>
<img src="http://image.secusoft.cc/images/4/882/13823/20200101/63e461c2-32a2-4a25-a39f-58eacdf5adbboss2019-12-31_08_31_44_200_882_1632_13823_1.jpg">-->
</body>
</html>
